<template>
  <div class="order">
    <div class="right-con">
      <el-row>
        <el-col :span="8">
          <el-input
            v-model="entryTxt"
            placeholder="请输入订单编号查询"
            @change="txtnull()">
          </el-input>
        </el-col>
        <el-col :span="2">
          <div class="pl15">
            <el-button
              @click="searchList()"
              type="info">
              查询
            </el-button>
          </div>
        </el-col>
        <el-col style="line-height:37px;" :span="8">
          发货方式:
          <el-select v-model="value" size="small" @change="sentLengtha(value)">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick(activeName)">
          <el-tab-pane label="全部" name="0">
          </el-tab-pane>
          <el-tab-pane label="待发货" name="100">
          </el-tab-pane>
          <el-tab-pane label="已发货" name="200">
          </el-tab-pane>
          <el-tab-pane label="已完成" name="1000">
          </el-tab-pane>
        </el-tabs>
        <el-table
          :data="tableList"
          style="width: 100%">
          <el-table-column
            width="240"
            label="商品">
            <template scope="props">
              <div class="pb5 fs12">
                <div v-for="item in props.row.wares">
                  <div class="goodbox pt5">
                    <span class="goodimg mr15">
                      <img :src="item.image" height="50" alt="">
                    </span>
                    <span style="font-size: 13px;">{{item.name}}</span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            prop="out_order_id"
            label="发货号">
          </el-table-column>
          <el-table-column
            width="200"
            prop="order_sn"
            label="订单编号">
          </el-table-column>
          <el-table-column
            prop="send_type"
            label="发货方式">
            <template scope="props">
              <span v-if="props.row.send_type == 1">自行发货</span>
              <span v-if="props.row.send_type == 2">供应商发货</span>
            </template>
          </el-table-column>
          <el-table-column
            label="物流单号">
            <template scope="props">
              <div>{{props.row.extension.shipping_name}}</div>
              <div>{{props.row.extension.shipping_no}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="联系信息">
            <template scope="props">
              <div>{{props.row.extension.consignee}}</div>
              <div class=" silver mt5">{{props.row.extension.phone}}</div>
              <div class=" silver mt5">
                {{props.row.extension.province}}{{props.row.extension.city}}{{props.row.extension.district}}{{props.row.extension.address}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="下单时间">
          </el-table-column>
          <el-table-column
            label="状态">
            <template scope="props">
              <div style="color:red;"
                   v-if="props.row.status == 100">
                待发货
              </div>
              <div style="color:orange;"
                   v-if="props.row.status == 200">
                已发货
              </div>
              <div style="color:green;"
                   v-if="props.row.status == 1000">
                已完成
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template scope="props">
              <el-button class="fs14" type="text" size="small" @click="lookfn(props.row.id)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <page-ctrl
          v-if="pageData"
          :page_data="pageData"
          v-on:sentLengthfn="sentLengthfn"
          v-on:firstfn="firstData"
          v-on:nextfn="nextData"
          v-on:prefn="preData"
          v-on:lastfn="lastData">
        </page-ctrl>
      </div>
    </div><!--.right-con-->
    <!--模态框-->
    <order-model :model_data="modelData" :is_look="dialogTableVisible" v-on:closefn="closemodel"></order-model>
    <!--模态框-->
    <div v-if="loading" class="loadingbox"></div>
  </div><!--.order-->
</template>

<script type="text/ecmascript-6">
  import orderModel from '../common/orderModel';
  import pageCtrl from '../common/pageCtrl'
  import api from '../../assets/js/api';

  export default {
    name: "order",
    data() {
      return {
        pageData: null,
        searchTxt: '',
        entryTxt: '',
        activeName: '',
        status: '',//订单类型
        page: 1,//页码
        per_page: 5,//每页长度
        tableList: null, //表格数据
        dialogTableVisible: false,
        modelData: null,
        is_moreData: false, //是否有更多
        is_preData: false,//是否有上一页
        pages: null, //总页数
        is_change: false,
        loading: false,
        send_type: '', //发货方式
        options: [{
          value: '0',
          label: '全部'
        }, {
          value: '1',
          label: '自行发货'
        }, {
          value: '2',
          label: '供应商发货'
        }],
        value: '全部',
      }
    },
    components: {
      orderModel,
      pageCtrl
    },
    mounted: function () {
      this.getlist();
    },
    methods: {
      getlist: function () {
        this.loading = true;
        api.fetch("api/admin/orders?page="
          + this.page
          + '&per_page='
          + this.per_page
          + '&status='
          + this.status
          + '&order_sn='
          + this.searchTxt
          + '&send_type='
          + this.send_type)
          .then(res => {
            this.pageData = res.meta;
            this.pageData.page = this.page;
            this.pageData.tableDataLength = res.meta.pagination.total; //总长度
            this.pageData.pages = Math.ceil(this.pageData.tableDataLength / this.per_page); //总页数
            let getLengthData = res.meta.pagination.count;
            this.tableList = res.data;
            if (this.page <= 1) {
              this.pageData.is_preData = false;
            } else {
              this.pageData.is_preData = true;
            }
            if (getLengthData < this.per_page) {
              this.pageData.is_moreData = false;
            } else {
              this.pageData.is_moreData = true;
            }
            if (this.pages == this.page) {
              this.pageData.is_moreData = false;
              this.loading = false;
            }
            this.loading = false;
          }).catch();
      },
      handleClick: function (type) {
        if (type == '0') {
          this.status = ""
        } else {
          this.status = type
        }
        this.getlist();
      },
      firstData: function () {
        this.page = 1;
        this.getlist();
      },
      nextData: function () {
        this.page++;
        this.getlist();
      },//下一页
      preData: function () {
        this.page--;
        this.getlist();
      },//上一页
      lastData: function () {
        let pagelength = this.pageData.pages;
        this.page = pagelength;
        this.getlist();
      },//尾页
      lookfn: function (id) {
        api.fetch("/api/admin/orders/" + id)
          .then(res => {
            this.modelData = res.data;
            this.dialogTableVisible = true
          }).catch();
      },//查看
      closemodel: function (off) {
        this.dialogTableVisible = off;
      },//关闭弹框
      searchList: function () {
        if (this.entryTxt == '') {
          return
        } else {
          this.page = 1;
          this.searchTxt = this.entryTxt;
          this.getlist();
          this.is_change = true;
        }
      }, //搜索
      sentLengthfn: function (lengthData) {
        this.page = 1;
        this.per_page = lengthData;
        this.getlist();
      }, //设置长度
      txtnull: function () {
        if (this.is_change == true) {
          if (this.entryTxt == '') {
            this.searchTxt = '';
            this.page = 1;
            this.per_page = 5;
            this.getlist();
            this.is_change = false;
          }
        }
      },
      sentLengtha: function (type) {
        if(type == 1){
          this.send_type=1;
          this.getlist();
        }else if(type == 2){
          this.send_type=2;
          this.getlist();
        }else{
          this.send_type='';
          this.getlist();
        }
      }
    }
  }
</script>

<style scoped>
  .order {
    height: 100%;
    min-width: 1200px;
  }

  .goodbox span {
    display: inline-block;
    vertical-align: middle;
    line-height: 50px;
    font-size: 16px;
  }

  .goodbox span.goodimg {
    width: 50px;
    height: 50px;
  }

  .silver {
    color: #999;
  }
</style>
